import React, {useState, useMemo, useEffect, useCallback, memo} from 'react';

import Chart from './../../components/Chart/index'
import LearnReactMemo from "./LearnReactMemo";
import StateDemo from "./LearnReactuseState";
import classNames from "classnames";

import './style.scss'
import LoadImageUrl from "./../components/image/loadImage";

const Graphic = () => {
  const [layout, setLayout] = useState('flex');

  useEffect(() => {
    console.log('Graphic')
  }, [])
  return (
    <div>
      <Chart></Chart>
      <div className={classNames({'l-flex': layout === 'flex'})}>
        <div className={'state-con'}>
          <LearnReactMemo></LearnReactMemo>
        </div>
        <div className={'state-con'}>
          <StateDemo></StateDemo>
        </div>
        <div className={'state-con'}>
          <LoadImageUrl></LoadImageUrl>
        </div>
      </div>
    </div>
  )
}

export default Graphic;
